<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
         var wrap = document.querySelector("#warp");

         //给容器绑定事件
         wrap.ondragenter =function(){
         	this.style.
         }

         // 获取到用户拖拽进来的文件信息 获取的是图片在本地磁盘的路径
             var file = e.dataTransfer.files[0];
             //创建文件读取对象
             var fileReader = new fileReader();

             //给对象绑定load事件函数，当对象吧路径下的数据读取完毕后，会触发该函数，从该函数中获取到读取的内容
             fileReader.onload = funciton(e){
             	//获取读取出来的图片数据
             	var data = e.target.result
             	//console.log(data);
             	//把图片暂存在浏览器中
             	that.style.background = 'url('+data +') no-repeat center';
             	that.style.backgroundSize = 100%;
             	that.innerText = '';
             }
             //让读取对象读取用户拖拽文件的路径
             fileReader.readAsDataURL(file);
         }

	</script>
</body>
</html>